<html>
	<head>
		<title>shopping test</title>
    
		<style type="text/css" media="screen">
			
			body {
				background: #ACF;
			}

			#div_listproductclasses {
				background: #FFA;
			}
		</style>

    <script type="text/javascript" src="jquery.js"></script>
		<script language="JavaScript" type="text/javascript">
	
		 $(function(){

		 $(".hideable").click(function(event){
   		 $(this).slideUp("slow");
		   event.preventDefault();
 			});
		 });
			
		function listProductClasses(){
		 	$.getJSON("cgi-bin/api.py?q=ListProductClasses", function(data){
				$("#div_listproductclasses").empty();
			 	$.each(data, function(i,item){
					tmp = String(item);
					$("#div_listproductclasses").append(tmp+"<br/>");
			 	});
				$("#div_listproductclasses").show();
	    });
		};													

		function addProductClass(){
		 	$.getJSON("cgi-bin/api.py?q=AddProductClass", { name: $("#txt_addproductclass_name").val() }, function(data){
			 	$.each(data, function(i,item){
				// Maybe later process returned status code here
				});
	    });
			$("#txt_addproductclass_name").val("");
		};													

		</script>


	</head>
	<body>

		<h2>Welcome to nothing</h2>

		<form id="frm_main" name="frm_main" onsubmit="">
			<fieldset>
				<legend>Add ProductClass</legend>
				<input type="text" id="txt_addproductclass_name" name="txt_addproductclass_name"/>
				<input type="button" id="btn_addproductclass" name="btn_addproductclass" value="Add" onclick="javascript:addProductClass()"/>
			</fieldset>
			<fieldset>
				<legend>List ProductClasses</legend>
				<div id="div_listproductclasses" class="hideable"></div>
				<input type="button" name="btn_listproductclasses" id="btn_listproductclasses" value="List ProductClasses" onclick="javascript:listProductClasses();"/>
			</fieldset>
		</form>

	</body>
	
</html>
